<!DOCTYPE html>
<html>
<head>
    <title>404 Not Found</title>
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
            padding-top: 100px;
            background-image: url('https://img0.baidu.com/it/u=1602723058,3668407537&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800');
            background-size: cover;
        }

        h1 {
            font-size: 72px;
            margin-bottom: 20px;
        }

        p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .glitch {
            font-size: 72px;
            color: #ff0000;
            position: relative;
            display: inline-block;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch::before {
            left: 2px;
            text-shadow: -2px 0 #00ff00;
            background-color: #000;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }

        .glitch::after {
            left: -2px;
            text-shadow: 2px 2px #0000ff, -2px -2px #ff00ff;
            background-color: #000;
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim-1 {
            0% {
                transform: scale(1.05);
            }

            5% {
                transform: scale(0.98) translate(2px, -2px);
            }

            10% {
                transform: scale(0.95) translate(-2px, 2px);
            }

            15% {
                transform: scale(0.92) translate(-2px, -2px);
            }

            20% {
                transform: scale(0.98) translate(2px, 2px);
            }

            25% {
                transform: scale(1.02) translate(-2px, 2px);
            }

            30% {
                transform: scale(1.05) translate(2px, -2px);
            }

            35% {
                transform: scale(1) translate(0);
            }

            100% {
                transform: scale(1) translate(0);
            }
        }

        @keyframes glitch-anim-2 {
            0% {
                transform: scale(1.05);
            }

            5% {
                transform: scale(0.98) translate(-2px, 2px);
            }

            10% {
                transform: scale(0.95) translate(2px, -2px);
            }

            15% {
                transform: scale(0.92) translate(2px, 2px);
            }

            20% {
                transform: scale(0.98) translate(-2px, -2px);
            }

            25% {
                transform: scale(1.02) translate(2px, -2px);
            }

            30% {
                transform: scale(1.05) translate(-2px, 2px);
            }

            35% {
                transform: scale(1) translate(0);
            }

            100% {
                transform: scale(1) translate(0);
            }
        }
    </style>
</head>
<body>
    <h1>404 <span class="glitch" data-text="Not Found">Not Found</span></h1>
    <p>Sorry, the page you are looking for does not exist.</p>
    <script>
        // 在这里可以添加更多的 JavaScript 代码来增加动态效果

        // 示例：使背景图像随鼠标移动
        document.addEventListener('mousemove', function (event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;
            var body = document.body;
            body.style.backgroundPosition = mouseX / 10 + 'px ' + mouseY / 10 + 'px';
        });
    </script>
</body>
</html>